<template>
	<div class="vue_app integralBuy" :style="`padding-top: ${screenHeight}px`">
		<div style="position: absolute;width: 100%;top: 0;z-index: 1;">
			<my-header :title="'积分兑换'" :hasTitle="true" :hasBack="true"></my-header>
			<span class="instructions" @click="jumpEventbuy">兑换记录</span>
			<!--头部-->
			<div class="integralBuy_top">
				<!-- <img id='integraladimg' :src="myadimg" style="max-height: 6rem;width: 100%;" /> -->
				<component 
					v-for="(item, index) in getRealComponentsList[0][1]" 
					v-sdrag="{componentName: item.componentName, handleType: 'sort', index}" 
					:is="item.componentName" 
					:key="index" 
					:config="item" 
					:data-id="item.id" 
					:dataList="dataStore[item.componentName][item.id]" 
					:part="1"
					>
				</component>
				<div class="usediv">
					<span class="usediv_span1">可用积分 ：</span>
					<span class="usediv_span2">{{myPointsdata.remainingscore || 0}}</span>
					<!--<span class="usediv_span3">普通会员</span>-->
				</div>
			</div>
			<tab-head :titleInfor="titleInfor" v-if="titleInfor">
			</tab-head>
		</div>
		<div style="width: 100%;height:100%;">
			<translate-main :lengths="3" ref='verticalScroll'>
				<div style="width: 100%;height:100%;">
					<ul class="aui-list aui-media-list detailed_list" v-if="activeIndex==0">
						<li class="aui-media-list-item-inner" v-if="mygiftCard" v-for="(val,index) in mygiftCard" :key="index">
							<div class="item_pic">
								<img :src="val.goodsImg || 'static/image/demo2.png'" />
							</div>
							<div class="item_conten">
								<span>{{val.goodsName}}</span>
								<p>{{val.hotspotDesc}}</p>
								<span>{{val.requiredIntegral}}<span style="font-size: 0.6rem;margin-left: 0.1rem;">积分</span></span>
							</div>
							<span v-if="val.goodsStock != 0" class="item_use" @click="sureUsecard(val,1)">兑换</span>
							<span v-if="val.goodsStock == 0" class="nouseclick">兑换</span>
						</li>
						<div class="no_data" v-if="flaggiftCard">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无可兑换的礼品卡</p>
						</div>
					</ul>
					<ul class="aui-list aui-media-list detailed_list" v-if="activeIndex==1">
						<li class="aui-media-list-item-inner" v-if="myCoupon" v-for="(val,index) in myCoupon" :key="index">
							<div class="item_pic">
								<img :src="val.goodsImg || 'static/image/demo2.png'" />
								<span v-if="val.goodsStock == 0" class="soldout">已售罄</span>
							</div>
							<div class="item_conten">
								<span>{{val.goodsName}}</span>
								<p>{{val.hotspotDesc}}</p>
								<span>{{val.requiredIntegral}}<span style="font-size: 0.6rem;margin-left: 0.1rem;">积分</span></span>
							</div>
							<span v-if="val.goodsStock != 0" class="item_use" @click="sureUsecard(val,2)">兑换</span>
							<span v-if="val.goodsStock == 0" class="nouseclick">兑换</span>
						</li>
						<div class="no_data" v-if="flagCoupon">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无可兑换的优惠券</p>
						</div>
					</ul>
					<ul class="aui-list aui-media-list detailed_list" v-if="activeIndex==2">
						<li class="aui-media-list-item-inner" v-if="myproduct" v-for="(val,index) in myproduct" :key="index" @click="sureUsegoods(val)">
							<div class="item_pic">
								<img :src="val.goodsImg || 'static/image/demo2.png'" />
								<span v-if="val.goodsStock == 0" class="soldout">已售罄</span>
							</div>
							<div class="item_conten">
								<span>{{val.goodsName}}</span>
								<p>{{val.hotspotDesc}}</p>
								<span>{{val.requiredIntegral}}<span style="font-size: 0.6rem;margin-left: 0.1rem;">积分</span></span>
							</div>
							<span v-if="val.goodsStock != 0" class="item_use">兑换</span>
							<span v-if="val.goodsStock == 0" class="nouseclick">兑换</span>
						</li>
						<div class="no_data" v-if="flagproduct">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无可兑换的商品</p>
						</div>
					</ul>
				</div>
			</translate-main>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { mapGetters, mapMutations } from "vuex";
	import { MessageBox } from '@/ui-components';
	import TabHead from '../../real-components/TabHeadOrder';
	import TranslateMain from '../../real-components/TranslateTest';
	import { Toast } from '../../utils/toast.js';
	import { showLoading, hideLoading } from "@/utils/loading";

	import initData from "../../utils/lxn/handleData";
	import PointMallCarousel from "../../real-components/PointMallCarousel/_index";
	import HomeNotice from "../../real-components/HomeNotice/_index";
	import HomeCarousel from "../../real-components/HomeCarousel/_index";
	import UserCard from "../../real-components/UserCard/_index";
	import NewZone from "../../real-components/NewZone/_index";
	import ProductItemNew from "../../real-components/ProductItemNew/_index";
	import FeaturedGoodsNew from "../../real-components/FeaturedGoodsNew/_index";
	import FirstClassifyNew from "../../real-components/FirstClassifyNew/_index";
	import GuessYouLike from "../../real-components/GuessYouLike/_index"
	import ActivitiesTwoPro from "../../real-components/activitiesTwoPro/_index";
	import ActivitiesOnePro from "../../real-components/activitiesOnePro/_index";
	import ActivitiesNinePro from "../../real-components/activitiesNinePro/_index";
	import ActivitiesThreePic from "../../real-components/activitiesThreePic/_index";
	import Activitiesbanner from "../../real-components/activitiesbanner/_index";
	import ActivitieCoupons from "../../real-components/ActivitieCoupons/_index";
	import ActivitieCoupons2 from "../../real-components/ActivitieCoupons2/_index";

	export default {
		data() {
			return {
				titleInfor: [{
					goodsClassId: "",
					goodsClassName: "礼品卡"
				}, {
					goodsClassId: "",
					goodsClassName: "优惠券"
				}, {
					goodsClassId: "",
					goodsClassName: "商品"
				}],
				myadimg: null,
				myPointsdata: [],
				mygiftCard: [],
				myCoupon: [],
				myproduct: [],
				onedata: [],
				twodata: [],
				flaggiftCard: false,
				flagCoupon: false,
				flagproduct: false,
				gettoken: '',
				screenHeight: '362',
			}
		},
		components: {
			"my-header": MyHeader,
			"tab-head": TabHead,
			"translate-main": TranslateMain,
			PointMallCarousel,
			
			HomeCarousel,
			HomeNotice,
			UserCard,
			NewZone,
			ProductItemNew,
			FeaturedGoodsNew,
			FirstClassifyNew,
			ActivitiesTwoPro,
			ActivitiesOnePro,
			ActivitiesNinePro,
			ActivitiesThreePic,
			Activitiesbanner,
			ActivitieCoupons,
			ActivitieCoupons2,
			GuessYouLike
			// GuessYouLike: () => ({
			// 	component: new Promise((resolve) => {
			// 		setTimeout(() => {
			// 			resolve(
			// 				import("../../real-components/GuessYouLike/_index"));
			// 			PSEvent.trigger("initDom");
			// 		}, 1000);
			// 	}),
			// 	loading: ll
			// }),
		},
		methods: {
			...mapMutations('xxy', [
				'setdetailgoback'
			]),
			//获取广告图片接口
			queryAdimg() {
				let config = {
					url: window.api.trade_host + '/integralGoods/getH5IntegralGoodsAdImg',
					method: 'GET',
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config).then((res) => {
					this.querymygiftCard()
				})
			},
			//获取积分兑礼品卡接口
			querymygiftCard() {
				let config2 = {
					url: window.api.trade_host + '/integralGoods/getH5IntegralGoodsList?goodsType=0',
					method: 'GET',
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config2).then((res) => {
					hideLoading()
					if(res.data.data[0]) {
						this.mygiftCard = res.data.data[0].integralGoodsList
						this.gettoken = res.data.data[0].token
					}
					if(!this.mygiftCard || this.mygiftCard.length == 0) {
						this.flaggiftCard = true
					}
				}).catch(err => {
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//获取积分兑优惠券接口
			queryCoupon() {
				showLoading()
				let config3 = {
					url: window.api.trade_host + '/integralGoods/getH5IntegralGoodsList?goodsType=1',
					method: 'GET',
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config3).then((res) => {
					hideLoading()
					if(res.data.data[0]) {
						this.myCoupon = res.data.data[0].integralGoodsList
						this.gettoken = res.data.data[0].token
					}
					if(!this.myCoupon || this.myCoupon.length == 0) {
						this.flagCoupon = true
					}
				}).catch(err => {
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//获取积分兑商品接口
			queryproduct() {
				showLoading()
				let config5 = {
					url: window.api.trade_host + '/integralGoods/getH5IntegralGoodsList?goodsType=2',
					method: 'GET',
					params: {
						storeCode: localStorage.getItem('storeCode')
					},
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config5).then((res) => {
					hideLoading()
					if(res.data.data[0]) {
						this.myproduct = res.data.data[0].integralGoodsList
						this.gettoken = res.data.data[0].token
					}
					if(!this.myproduct || this.myproduct.length == 0) {
						this.flagproduct = true
					}
				}).catch(err => {
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//跳转兑换记录
			jumpEventbuy() {
				this.$router.push({
					path: 'integralBuyRecord'
				})
			},
			//获取积分接口
			queryMyPoints(flag) {
				let config = {
					url: window.api.customer_host + '/customer/getCustomer',
					method: 'GET',
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				axios(config).then((res) => {
					this.myPointsdata = res.data.data[0]
					if(flag == 1) {
						hideLoading()
						MessageBox('兑换成功！', '我的可用积分：' + (this.myPointsdata.remainingscore || 0)).then(() => {
							this.$router.push({
								path: 'integralBuyRecord'
							})
						})
					}
				}).catch(err => {
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
			//兑换虚拟商品
			sureUsecard(item, num) {
				showLoading()
				let config = {
					url: window.api.trade_host + '/integralOrder/insertVirtualGoodsOrder',
					method: 'post',
					data: {
						integralGoodsRid: item.rid,
						goodsCode: item.goodsCode,
						storeCode: localStorage.getItem('storeCode'),
						goodsNum: 1,
						token: this.gettoken

					},
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				if(this.myPointsdata.remainingscore < item.requiredIntegral) {
					hideLoading()
					Toast({
						message: '积分不足兑换该商品',
						duration: 2000,
						type: "fail"
					})
				} else {
					MessageBox.confirm('确认使用' + item.requiredIntegral + '积分兑换' + item.goodsName + "？").then(() => {
						axios(config).then((res) => {
							if(res.data.returnCode == 1) {
								this.queryMyPoints(1)
							} else if(res.data.returnCode == 5 || res.data.returnCode == 3) {
								hideLoading()
								MessageBox(res.data.msg + '，兑换失败！', '请重新选择兑换').then(() => {
									this.gettoken = res.data.data[0]
									if(num == 1) {
										this.querymygiftCard()
									} else if(num == 2) {
										this.queryCoupon()
									}
								})
							} else {
								hideLoading()
								MessageBox(res.data.msg + '，兑换失败！', '我的可用积分：' + (this.myPointsdata.remainingscore || 0)).then(() => {
									this.gettoken = res.data.data[0]
								})
							}
						})
					}, () => {
						hideLoading()
					})
				}

			},
			//兑换实物商品跳转详情
			sureUsegoods(item) {
				if(item.goodsStock == 0) {
					return
				}
				this.$router.push({
					path: 'integralProDetail?rid=' + item.rid
				})
			},
			//请求模板轮播配置的缓存数据
			getCarsouleData(isRefresh = false){
				initData(isRefresh);
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getdetailgoback"
			]),
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
			...mapGetters("xxy", {
				dataStore: "getDataStore"
			}),
			...mapGetters("gw", ["getRealComponentsList"]),
		},
		created() {
			if(this.getdetailgoback == 2) {
				this.$store.dispatch('cjy/changeClassifyIndex', 2)
				this.queryproduct()
				this.setdetailgoback('')
			} else {
				this.$store.dispatch('cjy/changeClassifyIndex', 0)
			}
		},
		watch: {
			activeIndex(newdata, olddata) {
				if(newdata == '0') {} else if(newdata == '1') {
					this.onedata.push(newdata)
					if(this.onedata.length == 1) {
						this.queryCoupon()
					}
				} else if(newdata == '2') {
					this.twodata.push(newdata)
					if(this.twodata.length == 1) {
						this.queryproduct()
					}
				}
			}
		},
		updated() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.verticalScroll && this.$refs.verticalScroll.refresh();
				}, 500)
			});
		},
		mounted() {
			var sessionId = localStorage.getItem('sessionId');
			if(!sessionId || sessionId == 'undefined') {
				MessageBox('用户未登录账号', '请先登录账号再积分兑换吧').then(
					() => {
						this.$router.push({
							path: 'login',
							query: {
								page: 'IntegralBuy'
							}
						})
					}
				)
				return
			}
			this.queryAdimg()
			this.getCarsouleData();
			this.queryMyPoints(0)
			console.log("KKKK",this.getRealComponentsList)
		},
	}
</script>

<style scoped>
	.aui-list .aui-list-item {
		border-top: 1px solid #f1f1f1;
	}
	
	.aui-media-list .aui-list-item-inner {
		text-align: left;
	}
	
	.points {
		font-size: 1rem;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		display: inline-block;
	}
	
	.pointsok {
		margin-right: 0.5rem;
	}
	
	.aui-list .aui-list-item-title {
		display: inline-block;
		width: 70%;
		text-align: left;
	}
	
	.integralBuy {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.integralBuy .instructions {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
	
	.integralBuy .integralBuy_top {
		position: relative;
		margin-bottom: 0.8rem;
	}
	
	.integralBuy .usediv {
		height: 2.3rem;
		text-align: left;
		background-color: #fff;
		font-size: 0.75rem;
	}
	
	.usediv_span1 {
		margin-left: 0.6rem;
		line-height: 2.3rem;
	}
	
	.usediv_span2 {
		color: #EF5423;
		line-height: 2.3rem;
		margin-right: 0.5rem;
	}
	
	.usediv_span3 {
		display: inline-block;
		padding: 0rem 0.1rem;
		background-color: #FEAC1C;
		color: #FFF;
		font-size: 0.6rem;
		border-radius: 0.2rem;
	}
	
	.integralBuy .item_pic {
		display: inline-block;
		width: 4.5rem;
		height: 4.5rem;
		position: relative;
	}
	
	.integralBuy .soldout {
		position: absolute;
		display: inline-block;
		width: 3rem;
		top: 1.5rem;
		left: 0.7rem;
		padding: 0.1rem;
		background-color: #999;
		border-radius: 2rem;
	}
	
	.integralBuy .item_pic img {
		/* width: 100%;
		height: 100%; */
		width:4rem;
		height:4rem;
		margin: 0 auto;
		position: relative;
	}
	
	.integralBuy .item_conten {
		display: inline-block;
		width: 8.5rem;
		text-align: left;
		padding: 0.5rem 0.2rem;
	}
	
	.integralBuy .item_conten p {
		margin: 0.2rem 0rem;
		font-size: 0.6rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.integralBuy .item_conten span:last-child {
		color: #EF5423;
		font-size: 0.75rem;
	}
	
	.integralBuy .item_use {
		display: inline-block;
		position: absolute;
		right: 0.5rem;
		top: 1.7rem;
		color: #EF5423;
		border: 1px solid #EF5423;
		border-radius: 0.3rem;
		padding: 0.05rem 0.25rem;
	}
	
	.integralBuy .nouseclick {
		display: inline-block;
		position: absolute;
		right: 0.5rem;
		top: 1.7rem;
		border-radius: 0.3rem;
		padding: 0.05rem 0.25rem;
		color: #ccc;
		border: 1px solid #ccc;
	}
	
	.integralBuy li.aui-media-list-item-inner {
		border-bottom: 1px solid #f1f1f1;
		padding: 0.3rem 0px 0.3rem 0.75rem;
		position: relative;
	}
	
	.integralBuy .no_data {
		background-color: #f5f5f5;
	}
	.integralBuy .cjy-outer{
		background:#fff !important;
	}
	.box .edit-cover{
		border: none !important;
		width:0px !important
	}
</style>